import React from 'react'
import './myAccount.scss'

import utils from '../../utils/utils'
import cookie from 'react-cookies'
import moment from 'moment'
import { List, Tabs, Row, Col,Select,DatePicker,Table,Button,Input,Card,Image,Descriptions,Switch ,Modal,message,Tooltip} from 'antd';
import BreadcrumbNav from '../../component/breadcrumb/breadcrumb'
import { EditOutlined, DeleteOutlined ,SettingOutlined,LoadingOutlined, PlusOutlined ,UploadOutlined} from '@ant-design/icons';
import {getUserPositionInfo,getOptLog,getProjectInfoByAccountId,checkPhone,checkPwd,auditPhone,auditPwd} from '../../api/accountManage'
import {getPositionById} from '../../api/account'

const { Column } = Table;
const { Option } = Select;
class myAccount extends React.Component{
    constructor(props){
        super(props)
        this.state = {
        dataSource : [
            
            ],
            my_account:'',
            department:'',
            isModalIphone:false,//修改手机号
            isModalPwd:false,//新建岗位
            modifyPhoneBox: false,
            changeAccountPwd: false,
            setPassword: false,
            isOldPwd:false,
            isPwdSame:false,
            isPhoneBind:false,
            activeStatus:1//当前状态：1，不编辑 2，编辑
        }
    }

    componentDidMount() {
        this.getMyAcc();
        
    }

    // 获取账号信息
    getMyAcc() {
        let _this = this;
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'uid':''
        }
        getUserPositionInfo(post_data).then(res => {
            console.log(res)
            _this.setState({
                my_account: res.data 
            },()=>{
                _this.getUserPosList();
                _this.getProjectInfoByAccountId()
            })
        })
    }
    // 获取项目列表
    getProjectInfoByAccountId = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'uid':''
        }
        getProjectInfoByAccountId(post_data).then(res => {
            if(res.code == 0){
                this.setState({
                    dataSource:res.data
                })
            }
        })
    }
    // 获取权限列表
    getUserPosList() {
        let _this = this;
        let { auth_token ,my_account} = this.state;
        console.log(my_account.position_id)
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'position_id':my_account.position_id
        }
        getPositionById(post_data).then(res => {
            console.log(res)
            _this.setState({
                user_ah_list: res.data
            })
        })
    }   
    // 点击修改手机号
    updateIphone = () => {
        this.setState({
            isModalIphone:true
        })
    }
    // 检验原密码
    vertifyOldPwd() {
        let _this = this;
        let { auth_token, pwd } = this.state;
        if(!pwd){ message.warn('请输入密码'); return; }
        
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'user_pwd':  utils.EncryptEcb(pwd),
        }

        checkPwd(post_data).then(res => {

            if(res.data && res.data.is_success == 0){
                message.error(res.message, 2);
            }else{
                _this.modifyPhoneOk();
            }
        })
    }

    modifyPhoneOk(e) {
        let _this = this;
        let { auth_token, phoneNumber, pwd } = this.state;
        if(!pwd){ message.warn('请输入密码'); return; }

        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'user_phone': phoneNumber,
            'user_pwd': utils.EncryptEcb(pwd)
        }

        auditPhone(post_data).then(res => {

            _this.setState({ modifyPhoneBox: false, });
            message.success('联系电话变更成功', 2, () => {
                _this.getMyAcc();
            });

        })
    }
    // 手机号校验
    phoneNumberVerfity() {
        let _this = this;
        let { auth_token, phoneNumber } = this.state;
        if(!phoneNumber){ message.warn('请输入手机号'); return; }
        if(!utils.isMobile(phoneNumber)){ message.warn('手机号格式不正确，请重新输入'); return; }

        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'user_phone': phoneNumber,
        }

        checkPhone(post_data).then(res => {
            console.log(res.is_has)
            if( res.is_has == 1){
                _this.setState({ 
                    isPhoneBind: true,
                });
            }else {
                _this.vertifyOldPwd();
                
            }  
        })
    }


    // 点击修改账号密码
    updatePsd = () => {
        this.setState({
            isModalPwd:true
        })
    }
    // 修改密码检验原密码
    changePwdOk() {
        let _this = this;
        let { oldPassword, auth_token } = _this.state;
        if(!oldPassword){
            message.info('请输入密码'); return;
        }
        
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'user_pwd': utils.EncryptEcb(oldPassword),
        }

        console.log(auth_token)
        checkPwd(post_data).then(res => {

            if(res.data && res.data.is_success == 0){
                _this.setState({
                    isOldPwd: true,
                })
            }else{
                _this.setState({
                    changeAccountPwd: false,
                    setPassword: true,
                })
            }
        })
    }
    setPasswordOk() {
        let _this = this;
        let { password, pwdAgain, auth_token } = _this.state;
        if(!password){ message.warn('请输入密码', 2); return ; }
        if(!pwdAgain){ message.warn('请再次输入密码', 2); return;}
        if(password != pwdAgain){ _this.setState({ isPwdSame: true, }); return ; }
        if(!utils.isPassword8(password) || !utils.isPassword8(pwdAgain)){ message.warn('密码格式不正确，请重新输入', 2); return ; }
        
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'user_pwd': utils.EncryptEcb(password),
        }
        auditPwd(post_data).then(res => {
            message.info('修改账号密码成功', 2, () => {
                _this.props.history.push({ pathname: `/login` })
            })
        })
    }

    // Modol修改手机号--ok
    handleOk1 = () => {
        this.setState({
            isModalIphone:false
        })
    };
    // Modol取消修改手机号
    handleCancel1 = () => {
        this.setState({
            isModalIphone:false
        })
    };

    // Modol修改账号密码--ok
    handleOk2 = () => {
        this.setState({
            isModalPwd:false
        })
    };
    // Modol取消新建岗位职务
    handleCancel2 = () => {
        this.setState({
            isModalPwd:false
        })
    };


    render(){
        const {dataSource,department,isModalIphone,isModalPwd,user_ah_list,activeStatus,pwdAgain,modifyPhoneBox,isPhoneBind,password,pwd,my_account,phoneNumber,changeAccountPwd,oldPassword,isOldPwd,setPassword,isPwdSame} = this.state
        return (
            <div id="ContentMainList" className="myAccount-con">
                <Row>
                    <Col span={24}>
                        <BreadcrumbNav />
                    </Col>
                    <Col span={24} style={{margin:'10px'}}>
                        <div className="tipss">
                            <span className="blue"></span>
                            <span>我的账号</span>
                            
                        </div>
                    </Col>
                    <Col span={15} style={{marginLeft:'30px',marginBottom:'20px'}}>
                        <span style={{fontSize:'20px',}}>{my_account.user_name}</span>
                        <span className="jobStatus">{my_account.state_name}</span>
                        {/* <span style={{fontSize:'14px',color:'#828383'}}>山西华龙煤炭运销有限公司</span> */}
                        
                    </Col>
                    <Col span={6} style={{marginLeft:'30px',marginBottom:'20px'}}>
                        <Button type="text" onClick={() => { this.setState({ changeAccountPwd: true, })} } style={{color:'#172DD1'}}>更改账号密码</Button>
                    </Col>
                    <Col span={6} style={{marginLeft:'30px'}}>
                        <span className="info" >联系电话：{my_account.user_phone}</span>
                        <button className="info" onClick={() => { this.setState({ modifyPhoneBox: true, })}} className="jobStatus2">修改</button>
                    </Col>
                   
                    <Col span={4} >
                        <span className="info">所属部门：{my_account.depart_name}</span>
                    </Col>
                    <Col span={4} >
                        <span className="info">岗位/职务：{my_account.position_name}</span>
                    </Col>
                    <Col span={24} style={{margin:'10px'}}>
                        <div className="borders">

                        </div>
                    </Col>
                    <Col span={24} style={{margin:'10px'}}>
                        <div className="tipss">
                            <span className="blue"></span>
                            <span>负责项目</span>
                        </div>
                    </Col>
                    <div style={{marginLeft:'25px',background:'#f7f7f7',minHeight:'60px',width:'70%',padding:'15px'}}>
                        <Row>
                            {dataSource?dataSource.map((item,index)=>(
                                <Col span={4} style={{fontSize:'16px',textAlign:'center'}}>
                                    {item.project_name}
                                </Col>
                                )):null
                            }
                        </Row>
                        
                    </div>
                    {/* <Col span={18} style={{margin:'10px 20px',background:'#f7f7f7',height:'60px'}}>
                       
                    </Col> */}
                    <Col span={24} style={{margin:'10px'}}>
                        <div className="tipss">
                            <span className="blue"></span>
                            <span>系统功能模块权限：（根据「岗位/职务」进行匹配）</span>
                            <div style={{background:'#f7f7f7',marginTop:'10px',padding:'10px'}}>
                            {
                                user_ah_list? user_ah_list.map((item,index) =>{
                                    if(item.children&&item.children!=[]){                                                   
                                        return (
                                            <div  >
                                                <span style={{display:'inline-block',margin:'10px',fontSize:'16px'}}>{item.menu_name}</span>
                                                {item.children.map((el,i)=> (
                                                    <span style={{display:'inline-block',margin:'10px',fontSize:'13px'}}>{el.menu_name}</span>
                                                ))}
                                            </div>
                                        )
                                    }else{
                                        return (
                                            <div>
                                                <span style={{display:'inline-block',margin:'10px',fontSize:'16px'}}>{item.menu_name}</span>
                                            </div>
                                        )
                                    }
                                    
                                }):null
                            }</div>
                        </div>
                    </Col>
                    
                   
                    {/* 修改手机号 */}
                    <Modal title="联系电话变更" visible={isModalIphone} onOk={this.handleOk1.bind(this)} onCancel={this.handleCancel1.bind(this)}>
                        <div>
                            <span>原联系电话：13210192895</span>
                            
                            <Input placeholder="请输入新的手机号" />
                            <Input placeholder="请输入账号密码" />
                        </div>
                    </Modal>
                    {/* 联系电话修改 */}
                    <div className="modify-phone-box">
                        <Modal
                            width={ 447 }
                            maskClosable={ false }
                            destroyOnClose={ true }
                            getContainer={ false }
                           
                            
                            visible={ modifyPhoneBox }
                            onOk={this.phoneNumberVerfity.bind(this)}
                            onCancel={ () => { this.setState({ modifyPhoneBox: false, })} }
                            okText="确认变更"
                            footer={[
                                <Button key="create" style={{color:"#fff"}} type="primary" disabled={ isPhoneBind }  onClick={this.phoneNumberVerfity.bind(this)}>确认变更</Button>,
                            ]}                    
                            >
                            <div className="title">联系电话变更</div>
                            <div className="info">
                                <span className="old">原联系电话：{ my_account.user_phone }</span>
                                <Input placeholder="请输入新的手机号码" value={ phoneNumber } onChange={ (e) => { this.setState({ phoneNumber: e.currentTarget.value, isPhoneBind: false, })}}/>
                                <span className="tip">{ isPhoneBind ? '该号码已绑定系统其它账号，无法更改' : '' }</span>
                            </div>
                            <div className="info">
                                <Input placeholder="请输入账号密码" value={ pwd }  onChange={ (e) => { this.setState({ pwd: e.currentTarget.value })}} disabled={ isPhoneBind }/>
                            </div>
                        </Modal>
                    </div>
                    {/* 修改账号密码 */}
                    <Modal title="账号密码变更" visible={isModalPwd} onOk={this.handleOk2.bind(this)} onCancel={this.handleCancel2.bind(this)}>
                        <div>
                            <span>请输入登录密码</span>
                            <Input placeholder="原密码" />
                        </div>
                    </Modal>
                    {/* 账号密码变更 */}
                    <div className="modify-phone-box account-pwd-modify">
                        <Modal
                            width={ 447 }
                            maskClosable={ false }
                            destroyOnClose={ true }
                            getContainer={ false }
                            title="Basic Modal"
                            
                            visible={ changeAccountPwd }
                            onOk={this.changePwdOk.bind(this)}
                            onCancel={ () => { this.setState({ changeAccountPwd: false })} }
                            okText="下一步"
                            footer={[
                                <Button key="create" type="primary"  onClick={this.changePwdOk.bind(this)}>下一步</Button>,
                            ]}                    
                            >
                            <div className="title">账号密码变更</div>
                            <div className="info">
                                <span className="old">请输入登录密码</span>
                                <Input.Password  placeholder="原密码" value={ oldPassword } onChange={ (e) => { this.setState({ oldPassword: e.currentTarget.value, isOldPwd: false })}}/>
                                { isOldPwd ? <span className="ca-tip">密码输入有误，请重新输入</span> : '' }
                                
                            </div>
                        </Modal>
                    </div>

                    {/* 账号密码变更-新密码设置 */}
                    <div className="modify-phone-box">
                        <Modal
                            width={ 447 }
                            maskClosable={ false }
                            destroyOnClose={ true }
                            getContainer={ false }
                            title="Basic Modal"
                            
                            visible={ setPassword }
                            onOk={this.setPasswordOk.bind(this)}
                            onCancel={ () => { this.setState({ setPassword: false })} }
                            okText="确认变更"
                            footer={[
                                <Button key="create" style={{color:'#fff'}} type="primary" disabled={ isPwdSame } onClick={this.setPasswordOk.bind(this)}>确认变更</Button>,
                            ]}                    
                            >
                            <div className="title">账号密码变更</div>
                            <div className="info">
                                <Input.Password  placeholder="请输入新密码" value={ password } onChange={ (e) => { this.setState({ password: e.currentTarget.value, isPwdSame: false, })}}/>
                                <span className="check-tip" id="tool-tip">
                                    查看密码输入规则
                                    <Tooltip getPopupContainer={() => document.getElementById('tool-tip')} placement="right" title={<span style={{color:'#666'}}><span>密码输入需符合以下条件：</span><br /><span>1.密码长度至少8位；密码含有数字&字母;</span><br /><span>2.含有字母大小写;</span></span>}>
                                        <span className="icon"> </span>
                                    </Tooltip>
                                </span>
                            </div>
                            <div className="info">
                                <Input.Password  placeholder="请再次输入新密码" value={ pwdAgain } onChange={ (e) => { this.setState({ pwdAgain: e.currentTarget.value, isPwdSame: false, })} }/>
                                { isPwdSame ? <span className="ca-tip">密码输入不一致，请重新输入</span> : '' }
                            </div>
                        </Modal>
                    </div>

                </Row>
                
            </div>
        )
    }
}

export default myAccount